<template>
  <div class="energy_consume">
    <div class="top_query">
      <px-radio-group v-model="activeName" class="tabSwitch" @change="handleChangeTypeFn">
        <px-radio-button v-for="item in energyTypeList" :key="item.value" :label="item.value">{{ item.name }}</px-radio-button>
      </px-radio-group>
      <px-form ref="queryRef" class="custom-form-ui inspection-form" :model="queryParams" :inline="true" label-width="100px">
        <px-form-item label="时间维度" prop="dataFormat" style="width: auto; padding-right: 10px">
          <px-radio-group v-model="queryParams.queryTimeGranularity" style="margin-left: 10px" @change="handleChangeFn">
            <!-- <px-radio size="small" label="Hourly">小时</px-radio> -->
            <px-radio size="small" label="Daily">日</px-radio>
            <px-radio size="small" label="Monthly">月</px-radio>
            <px-radio size="small" label="Yearly">年</px-radio>
          </px-radio-group>
        </px-form-item>
        <px-form-item label="时间范围" style="width: 380px">
          <!-- <px-time-picker
            v-if="queryParams.queryTimeGranularity === 'Hourly'"
            v-model="dateRange"
            is-range
            range-separator="-"
            format="HH"
            value-format="HH"
            start-placeholder="开始小时"
            end-placeholder="结束小时"
          /> -->
          <px-date-picker
            v-if="queryParams.queryTimeGranularity === 'Daily'"
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <px-date-picker
            v-if="queryParams.queryTimeGranularity === 'Monthly'"
            v-model="dateRange"
            type="monthrange"
            value-format="YYYY-MM"
            range-separator="-"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          />
          <div v-if="queryParams.queryTimeGranularity === 'Yearly'">
            <yearPicker
              ref="statisticPicker"
              :labelWidth="0"
              labelText=""
              :clearable="false"
              :initYear="dateValue"
              @updateTimeRange="updateStatisticYear"
            />
          </div>
        </px-form-item>
        <px-button type="primary" icon="" @click="handleQuery">搜索</px-button>
        <px-button icon="" @click="resetQuery">重置</px-button>
        <px-button v-has="'ALL_ENERGY_REUSED_FLOW_DIAGRAM_DOWNLOAD'" @click="handleExport">导出</px-button>
      </px-form>
    </div>

    <OverView v-if="activeName === 'OverView'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <Electricity v-if="activeName === 'Electricity'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <Water v-if="activeName === 'Water'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <NG v-if="activeName === 'NG'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <SteamHotWater v-if="activeName === 'HotStream'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <Gas v-if="activeName === 'Gas'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <Diesel v-if="activeName === 'Diesel'" ref="comRef" :timeType="timeType" :queryParams="queryParams" />

    <!-- <component :is="activeCom" ref="comRef" :key="comKey" :timeType="timeType" :queryParams="queryParams" /> -->
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, computed, onUnmounted, markRaw } from "vue";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import { emitter } from "@/utils/mitt";
import { PxMessage } from "px-ui";
import OverView from "./component/overView.vue";
import Electricity from "./component/electricity.vue";
import Water from "./component/water.vue";
import NG from "./component/ng.vue";
import SteamHotWater from "./component/steamHotWater.vue";
import Gas from "./component/gas.vue";
import Diesel from "./component/diesel.vue";
import dayjs from "dayjs";

defineOptions({
  name: "ALL_ENERGY_REUSED_FLOW_DIAGRAM"
});

const activeName = ref("Electricity"); // 默认总览
const comKey = ref(Date.now());
const comRef = ref(null);

const energyTypeList = ref([
  // { value: "OverView", name: "总览", com: markRaw(OverView) },
  { value: "Electricity", name: "电", com: markRaw(Electricity) },
  { value: "Water", name: "水", com: markRaw(Water) },
  // { value: "NG", name: "天然气", com: markRaw(NG) },
  { value: "HotStream", name: "蒸汽/热水", com: markRaw(SteamHotWater) }
  // { value: "Gas", name: "大宗气", com: markRaw(Gas) },
  // { value: "Diesel", name: "柴油", com: markRaw(Diesel) }
]);
const activeCom = computed(() => energyTypeList.value.find(item => item.value === activeName.value)?.com);

const { proxy } = getCurrentInstance();

emitter.on("viceMenuChange", val => {
  activeName.value = val;
  midKey.value = Date.now();
  activeName.value = "Electricity";
});

const midKey = ref(Date.now());

const yearStart = ref("");
const yearEnd = ref("");
const dateValue = ref({
  startYear: `${new Date().getFullYear() - 2}`,
  endYear: `${new Date().getFullYear()}`
});
// 选完/输入完成的回调
const updateStatisticYear = (startYear, endYear) => {
  dateRange.value = [startYear ? startYear.toString() : "", endYear ? endYear.toString() : ""];
  yearStart.value = `${startYear}-01-01 00:00:00`;
  yearEnd.value = `${endYear}-12-31 23:59:59`;
};

onUnmounted(() => {
  emitter.off("viceMenuChange");
});

// 定义数据
const dateRange = ref([]);

const queryParams = ref({
  queryTimeGranularity: "Monthly",
  factory: ""
});

const queryTypeParams = ref({
  energyType: "Electricity"
});

// 获取当月第一天
const getCurrentMonthF = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  let d = "01";
  m = m < 10 ? "0" + m : m;
  return [y, m, d].join("-");
};

// 获取当月最后一天
const getCurrentMonthL = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  let d = new Date(y, m, 0).getDate();
  m = m < 10 ? "0" + m : m;
  d = d < 10 ? "0" + d : d;
  return [y, m, d].join("-");
};

const handleChangeTypeFn = val => {
  queryTypeParams.value.energyType = val;
  activeName.value = val;
};

const handleChangeFn = val => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  switch (val) {
    case "Daily":
      dateRange.value = [getCurrentMonthF(), getCurrentMonthL()];
      break;
    case "Monthly":
      dateRange.value = [`${year}-${month}`, `${year}-${month}`];
      break;
    case "Yearly":
      let yearE = new Date().getFullYear();
      yearStart.value = `${yearE - 2}-01-01 00:00:00`;
      yearEnd.value = `${yearE}-12-31 23:59:59`;
      break;
    default:
      break;
  }
};

// 校验时间范围不为空
const checkDate = () => {
  if (queryParams.value.queryTimeGranularity) {
    if (dateRange.value && dateRange.value.length) {
      return true;
    }
    if (queryParams.value.startTime && queryParams.value.endTime) {
      return true;
    }
  }
};

// 获取某月最后一天
const getMonthLastDay = (y, m) => {
  let date = new Date(y, m - 1, "01");
  date.setDate(1);
  date.setMonth(date.getMonth() + 1);
  let cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
  return cdate.getDate();
};

const timeType = ref("Monthly");
/** 搜索按钮操作 */
function handleQuery() {
  console.log("comRef", comRef.value);
  timeType.value = queryParams.value.queryTimeGranularity;
  if (queryParams.value.queryTimeGranularity === "Daily") {
    queryParams.value.startTime = dateRange.value[0] + " 00:00:00";
    queryParams.value.endTime = dateRange.value[1] + " 23:59:59";
  } else if (queryParams.value.queryTimeGranularity === "Monthly") {
    queryParams.value.startTime = dateRange.value[0].indexOf("00") != -1 ? dateRange.value[0] : dateRange.value[0] + "-01 00:00:00";
    const d = getMonthLastDay(Number(dateRange.value[1].split("-")[0]), Number(dateRange.value[1].split("-")[1]));
    queryParams.value.endTime = dateRange.value[1].indexOf("59") != -1 ? dateRange.value[1] : dateRange.value[1] + "-" + d + " 23:59:59";
  } else {
    queryParams.value.startTime = yearStart.value;
    queryParams.value.endTime = yearEnd.value;
  }
  console.log(queryParams.value.startTime, queryParams.value.endTime);
  proxy.$refs["queryRef"].validate(valid => {
    if (!valid) return;
    if (queryParams.value.queryTimeGranularity) {
      if (!checkDate()) {
        return PxMessage({
          type: "warning",
          message: "时间范围不能为空"
        });
      }
      comRef.value?.getData();
    } else {
      // midKey.value = Date.now();
      // isSerch.value = !isSerch.value;
    }
  });
}
/** 重置按钮操作 */
function resetQuery() {
  initQuery();
}

// 默认查询条件
const initQuery = () => {
  activeName.value = "Electricity";
  queryParams.value.queryTimeGranularity = "Monthly";
  timeType.value = "Monthly";
  dateRange.value = [dayjs().subtract(12, "month").format("YYYY-MM"), dayjs().subtract(1, "month").format("YYYY-MM")];
  queryParams.value.startTime = dayjs().subtract(12, "month").format("YYYY-MM") + "-01 00:00:00";
  queryParams.value.endTime = dayjs().subtract(1, "month").endOf("month").format("YYYY-MM-DD") + " 23:59:59";
};

const facCode = ref(localStorage.getItem("facCode"));

// 导出
const handleExport = () => {
  if (comRef.value) {
    comRef.value?.handleExport();
  }
};

onMounted(() => {
  queryParams.value.factory = facCode.value;
  initQuery();
  handleQuery();
});
</script>

<style lang="scss" scoped>
.energy_consume {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .top_turnback {
    margin-bottom: 16px;
  }

  .top_query {
    display: flex;
    min-width: 1300px;
    height: auto;
    padding: 16px 24px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 4px;

    /*
      * tab样式
      */
    .tabSwitch {
      //min-width: 300px;
      padding: 0 5px;
      margin-right: 20px;
      margin-bottom: 16px;
      background-color: #f4f4f4;
      border-radius: 4px;

      :deep(.px-radio-button__inner) {
        background-color: #f4f4f4;
        border: none;
      }

      :deep(.is-active) {
        border: none;

        .px-radio-button__inner {
          background-color: var(--px-color-primary);
          border-radius: 4px;
        }
      }
    }

    .select_year {
      display: flex;
      align-items: center;
      justify-content: left;
      margin-right: 20px;
    }

    .px-form-item {
      margin-bottom: 0;
    }
  }

  .con_top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 1300px;
    height: 360px;
    margin-bottom: 16px;

    .con_top_item:nth-child(1) {
      width: 33%;
      margin-right: 16px;
    }

    .con_top_item:nth-child(2) {
      width: 67%;
    }
  }

  .con_bot {
    width: 100%;
    min-width: 1300px;
  }

  // .ffu_total {
  //   position: relative;
  //   width: 100%;
  //   height: 100%;
  //   background-color: #fff;

  //   .iframe-con {
  //     box-sizing: border-box;
  //     width: 100%;
  //     height: 100%;
  //     overflow: hidden !important;
  //     border: 0;
  //   }
  // }
}

.switch-button {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 9999;
  box-shadow: 0 2px 10px 0 rgb(0 37 86 / 12%);
}

.sankey-chart-dom {
  width: 100%;
  height: calc(100vh - 262px);
  overflow: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px 0 rgb(0 37 86 / 12%);
}

.sankey-chart {
  width: 100%;
  height: 2200px;
}
</style>
